<template>
    <div class="app-container">
        <!-- 查询模块 -->
        <div class="formDiv">
            <el-form ref="form" :inline="true" label-width="140px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="项目名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目ID">
                            <el-input v-model="form.projectId"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目分类">
                            <el-cascader
                                placeholder="请选择" 
                                v-model="cates"
                                :options="cateOption"
                                change-on-select
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="医院名称">
                            <el-input v-model="form.hospital"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目类型">
                            <el-select placeholder="请选择" v-model="form.projectType">
                                <el-option
                                v-for="item in classOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="项目是否上架">
                            <el-select placeholder="请选择" v-model="form.status">
                                <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="预约状态">
                            <el-select placeholder="请选择" v-model="form.selectAppointmentStatus">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目添加时间">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
                            <el-button type="primary" @click="toRoutes('itemAdd')">新增</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <!-- table列表 -->
            <el-table
                @sort-change="handleSortChange"
                :data="tableData"
                class="tableData"
                style="width: 100%">
                <el-table-column
                    prop="projectId"
                    label="项目ID"
                >
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="项目名称"
                >
                </el-table-column>
                <el-table-column
                    label="项目类型"
                >
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.projectType | cateFn}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="项目图片"
                >
                    <template slot-scope="scope">
                        <div>
                            <img style="height:40px;width:40px" :src="scope.row.image | imgUrlFn" alt="">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hospitalName"
                    label="项目医院"
                >
                </el-table-column>
                <el-table-column
                    prop="sort"
                    sortable
                    label="排序"
                >
                </el-table-column>
                <el-table-column
                    prop="originPrice"
                    sortable
                    label="市场价"
                >
                </el-table-column>
                <el-table-column
                    prop="discounts"
                    sortable
                    label="优惠价"
                >
                </el-table-column>
                <el-table-column
                    prop="appointmentPrice"
                    sortable
                    label="预约金"
                >
                </el-table-column>
                <el-table-column
                    prop="deductionCredit"
                    label="抵扣积分"
                >
                </el-table-column>
                <el-table-column
                    prop="appointmentPeoples"
                    sortable
                    label="项目预约量"
                >
                </el-table-column>
                <el-table-column
                    prop="realPeoples"
                    label="真实预约量"
                >
                </el-table-column>
                <el-table-column
                    prop="star"
                    label="评星"
                >
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    label="项目添加时间"
                >
                </el-table-column>
                <el-table-column
                    label="是否上架"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.status"
                        @click.native="changeStatus(scope.row.projectId,'status',scope.row.status)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="'0'"
                        :inactive-value="'1'">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="是否秒杀"
                >
                    <template slot-scope="scope">
                        <!-- <div>
                            {{scope.row.isPush}}
                        </div> -->
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.isPush"
                        @click.native="changeStatus(scope.row.projectId,'isPush',scope.row.isPush)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="'0'"
                        :inactive-value="'1'">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="首页推荐"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.isDashboard"
                        @click.native="changeStatus(scope.row.projectId,'isDashboard',scope.row.isDashboard)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="'0'"
                        :inactive-value="'1'">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="美学设计师预约状态"
                >
                    <template slot-scope="scope">
                        <el-switch
                        class="switchStyle"
                        v-model="scope.row.serverAppointmentStatus"
                        @click.native="changeStatus(scope.row.projectId,'serverAppointmentStatus',scope.row.serverAppointmentStatus)"
                        active-color="#13ce66"
                        inactive-color="#eee"
                        :active-value="'0'"
                        :inactive-value="'1'">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="toRoutes('itemEdit',scope.row.projectId)" size="small">编辑</el-button>
                    <el-button type="text" @click="toRoutes('itemInfo',scope.row.projectId)" size="small">详情</el-button>
                    <el-button type="text" size="small" @click="deleteFn(scope.row.projectId)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagesCon">
                <div>
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listForm.pageNum"
                    :page-sizes="page_sizes"
                    :page-size="listForm.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page_totals">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {findProjectList,updateStatus,delProject} from '@/api/itemList'
import {findAllBeautyCategoryList} from '@/api/medicalClassifyList'
import { policy } from '@/api/policy'

export default {
    name:"itemIndex",
    data(){
        return {
            tableLoading:true,
            dates:"",
            value1:"",
            options:[{
                    value: '0',
                    label: '可预约'
                }, {
                    value: '1',
                    label: '不可预约'
                }
            ],
            statusOptions:[{
                    value: '0',
                    label: '上线'
                }, {
                    value: '1',
                    label: '下线'
                }, {
                    value: '2',
                    label: '回收站'
                }
            ],
            classOptions:[{
                    value: '0',
                    label: '预约项目'
                }, {
                    value: '1',
                    label: '全额购买项目'
                }
            ],
            cates:[],
            form:{
                pageNum: 1,
                pageSize:10,
                name:null,
                projectId:null,
                cate:null,
                hospital:null,
                projectType:null,
                status:null,
                isPush:null,
                isDashboard:null,
                serverAppointmentStatus:null,
                beginDate:null,
                endDate:null,
                date:null,
                sortKey:null,
                sortType:null
            },
            tableData:[],
            page_sizes:[10,30,50,100],
            page_totals:60,
            listForm:{
                pageNum: 1,
                pageSize:10
            },
            cateOption:[],
        }
    },
    filters:{
        imgUrlFn:function(e){
            return sessionStorage.getItem("imgUrlPrefix") + e
        },
        cateFn(e){
            return window.helper.cateType(e)
        }
    },
    created(){
        this.cateOption = window.helper.cateType("listReturn")
    },
    mounted(){
        this.getList(this.listForm)
        if(this.cateFn('0')!=[]){
            this.cateOption[0]["children"] = this.cateFn('0')
        }
        if(this.cateFn('1')!=[]){
            this.cateOption[1]["children"] = this.cateFn('1')
        }
        if(this.cateFn('2')!=[]){
            this.cateOption[2]["children"] = this.cateFn('2')
        }
        //获取图片路径
        this.getPolicy()
    },
    methods:{
        handleSortChange(val){
            let str = val.prop
            var temp = str.replace(/[A-Z]/g, function (match) {	
                    return "_" + match.toLowerCase();
                });
                if(temp.slice(0,1) === '_'){ //如果首字母是大写，执行replace时会多一个_，这里需要去掉
                    temp = temp.slice(1);
                }
            this.form.sortKey = temp
            if(val.order == "ascending"){
                this.form.sortType = "asc"
            }else{
                this.form.sortType = "desc"
            }
            // console.log(this.form)
            this.getList(this.form)
        },
        //获取签名
        getPolicy(){
            policy().then(res=>{
                // console.log(res)
                let aliyunOssToken = res.data.data
                let imgUrlPrefix = aliyunOssToken.host +'/'+ aliyunOssToken.dir +"/";
                this.imgUrl = imgUrlPrefix
                sessionStorage.setItem("imgUrlPrefix",imgUrlPrefix)
            })
        },
        //获取分类
        cateFn(e){
            let datas = {
                plate:e
            }
            let newArr=[]
            findAllBeautyCategoryList(datas).then(res=>{
                // console.log(res)
                let resData = res.data.data.list
                if(resData!=[]){
                    resData.forEach((item1,index) => {
                        newArr.push({
                            value: item1.id,
                            label: item1.name,
                        })
                        if(item1.children!=null){
                            newArr[index]["children"] = []
                            item1.children.forEach((item2,i) => {
                                newArr[index]["children"].push({
                                    value: item2.id,
                                    label: item2.name,
                                })
                                if(item2.children!=null){
                                    newArr[index]["children"][i]["children"] = []
                                    item2.children.forEach((item3) => {
                                        newArr[index]["children"][i]["children"].push({
                                            value: item3.id,
                                            label: item3.name,
                                        })
                                    })
                                }
                            })
                        } 
                    })
                }
            })
            return newArr
        },
        //成功状态弹窗
        succStatus(txt){
            this.$message({
                message: txt+'成功',
                type: 'success'
            });
        },
        //失败状态弹窗
        errorStatus(txt){
            this.$message.error(txt+'失败');
        },
        // 路由跳转
        toRoutes(e,userId) {
            let route = {name:e,query:{userId:userId}}
            this.$router.push(route)
        },
        //查询
        searchFn(){
            if(this.dates.length>0){
                this.form.beginDate = this.dates[0]
                this.form.endDate = this.dates[1]
            }
            this.form.cate = this.cates.join("/")
            console.log(this.form)
            this.getList(this.form)
        },
        //上下架与状态修改
        changeStatus(projectId,type,status){
            let datas = {
                projectId:projectId+""
            }
            console.log(datas)
            datas[type]=status+""
            updateStatus(datas).then(res =>{
                console.log(res)
                if(res.data.code === 0){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                }else{
                    this.$message.error('修改失败');
                }
            })
            // console.log(datas)
        },
        //列表数据获取
        getList(e){
            this.tableLoading = true
            let datas = e
            findProjectList(datas).then(res => {
                console.log(res)
                if(!res.data.code){
                    console.log(res)
                    this.tableData = res.data.data.list
                    this.page_totals = res.data.data.count
                }else{
                    this.$message.error("数据接口访问失败");
                }
                this.tableLoading = false
            })
            .catch(error =>{
                this.$message.error(error);
            })
        },
        //删除
        deleteFn(e){
            // console.log(e)
            let datas = {
                id:e
            }
            this.$confirm('删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delProject(datas).then(res =>{
                    // console.log(res)
                    if(!res.data.code){
                        this.succStatus("删除")
                        this.getList(this.listForm)
                    }else{
                        this.$message.error("数据接口访问失败");
                    }
                })
                .catch(error =>{
                    this.$message.error(error);
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                }); 
            });
        },
        //改变页面条数
        handleSizeChange(val) {
            this.form.pageSize = val
            this.getList(this.form)
        },
        //选择页数
        handleCurrentChange(val) {
            this.form.pageNum= val
            this.getList(this.form)
        },
    }
}
</script>
<style scoped>
/* 分页 */
.pagesCon{height: 40px;margin-top: 20px}
.pagesCon>div{float: right;}
</style>
